import React, { useEffect, useState } from "react";
import { LockOutlined, UserOutlined } from "@ant-design/icons";
import { Button, Checkbox, Form, Input, message } from "antd";
import styles from "./index.module.scss";
import { localStorageSetItem, sessionStorageSetItem } from "@/utils/localStorage";
import { useNavigate } from "react-router-dom";
import Cookie from "js-cookie";
import { botUserAdd, getAuthLogin, getServerList } from "@/service";
import { encrypt } from "@/utils";
import { FormInstance } from "antd/lib/form";

const formData = {
  steamId: "",
  username: "",
  nickName: "",
  password:"",
  email: "",
  phone: "",
};

interface RegisterFormProps {
  setIsLogin: (val: boolean) => void;
}

const App: React.FC<RegisterFormProps> = ({ setIsLogin }) => {
  const [form] = Form.useForm();
  const navigateTo = useNavigate();
  const { loginFormBox, loginFormButton, formTitle,  } = styles;
  const [loadings, setLoadings] = useState<boolean[]>([]);
  const [verification, setVerification] = useState<{ img: string; uuid: string }>({
    img: '',
    uuid: ''
  });
  const [captcha, setCaptcha] = useState<{ num1: number; num2: number; sum: number }>({
    num1: 0,
    num2: 0,
    sum: 0
  });

  useEffect(() => {
    getVerificationInfo();
    generateCaptcha();
  }, []);

  const generateCaptcha = () => {
    const num1 = Math.floor(Math.random() * 10);
    const num2 = Math.floor(Math.random() * 10);
    setCaptcha({ num1, num2, sum: num1 + num2 });
  };

  const getVerificationInfo = async () => {
    const res = await getServerList();
    if (res) {
      setVerification(res);
    }
  };

  const onFinish = async (values: any) => {
    const { captcha: userCaptcha } = values;
    if (Number(userCaptcha) !== captcha.sum) {
      form.setFieldsValue({ captcha: '' });
      generateCaptcha();
      alert('验证码错误，请重新输入');
      return;
    }

    try {
      setLoadings([true]);
      const res = await botUserAdd({
        ...values,
      });
      message.success(res)
      // sessionStorageSetItem("token", res?.token);
      // setIsLogin(true)
    } finally {
      setLoadings([false]);
    }
  };

  return (
    <div className={`${loginFormBox} global-center`}>
      <Form
        form={form}
        name="normal_login"
        className="login-form"
        initialValues={{ remember: true }}
        onFinish={onFinish}
      >
        <h1 className={`${formTitle} global-center`}>注册</h1>
        <Form.Item
          name="steamId"
          rules={[{ required: true, message: "steamId必填" }]}
          initialValue={formData.steamId}
        >
          <Input placeholder="请填写steamId(用于游戏交互)" />
        </Form.Item>
        <Form.Item
          name="username"
          rules={[{ required: true, message: "登录名必填" }]}
          initialValue={formData.username}
        >
          <Input placeholder="登录名(用于登录和排名显示)" />
        </Form.Item>
        <Form.Item
          name="nickName"
          rules={[{ required: true, message: "请填写QQ！" }]}
          initialValue={formData.nickName}
        >
          <Input placeholder="QQ" />
        </Form.Item>
        <Form.Item
          name="password"
          rules={[{ required: true, message: "请填写密码" }]}
          initialValue={formData.password}
        >
          <Input placeholder="密码" />
        </Form.Item>
        {/* <Form.Item
          name="email"
          rules={[{ required: true, message: "请填写邮箱！" }, {
            pattern: /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/,
            message: "请输入有效的邮箱地址！",
          },]}
          initialValue={formData.email}
        >
          <Input placeholder="邮箱" />
        </Form.Item>
        <Form.Item
          name="phone"
          rules={[{ required: true, message: "请填写手机号！" }, {
            pattern: /^1[3-9]\d{9}$/,
            message: "请输入有效的手机号码！",
          },]}
          initialValue={formData.phone}
        >
          <Input placeholder="手机号" /> */}
        {/* </Form.Item> */}
        
        {/* 新增验证码验证 */}
        <Form.Item
          label={<div className={styles.captchaImage}>
          {captcha.num1} + {captcha.num2} = ?
        </div>}
          name="captcha"
          rules={[{ required: true, message: "请输入验证码结果！" }]}
        >
          <Input placeholder="" />
        </Form.Item>

        <Form.Item>
          <Button
            type="primary"
            htmlType="submit"
            className={loginFormButton}
            loading={loadings[0]}
          >
            注册
          </Button>
        </Form.Item>
        <div style={{display: 'flex', justifyContent: 'end'}}><a onClick={() => setIsLogin(true)}>已有账号？去登录</a></div>
      </Form>
    </div>
  );
};

export default App;